<template>
  <div>
    <el-form ref="form" :model="formData" :rules="rules" label-width="120px" label-suffix=":">
      <el-form-item label="名称" prop="name">
        <el-input v-model="formData.name" placeholder="请输入名称"></el-input>
      </el-form-item>
      <el-form-item label="key" prop="key">
        <el-input v-model="formData.key" placeholder="请输入key"></el-input>
      </el-form-item>
      <el-form-item label="数值" prop="val">
        <el-radio-group v-model="formData.val" @change="valChangeHandler">
          <el-radio v-for="item in options" :key="item.label" :label="item.value">{{ item.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="范围" v-show="formData.val">
        <el-input v-model="formData.minValue" style="width: 40%"></el-input>
        % -
        <el-input v-model="formData.maxValue" style="width: 40%"></el-input>
        %
      </el-form-item>
      <el-form-item label="优化建议" prop="content">
        <el-input v-model="formData.content" type="textarea" :autosize="{ minRows: 10, maxRows: 20 }"
                  placeholder="请输入"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { dictMixin } from '@/mixin/dict'

const options = [
  { label: '有', value: true },
  { label: '无', value: false }
]

export default {
  name: 'AddOptimizationSuggestion',
  mixins: [dictMixin],
  props: {
    // 请求参数
    requestParams: {
      type: Object,
      default: () => ({})
    },
    // 弹窗数据
    popData: {
      type: Object,
      default: () => ({})
    },
    // 弹窗配置
    popConfig: {
      type: Object,
      default: () => ({})
    },
    // 弹窗取消
    close: {
      type: Boolean,
      default: false
    },
    // 弹窗确认
    confirm: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      options,
      isAdd: true,
      formData: {}
    }
  },
  computed: {
    rules() {
      return {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          { max: 100, message: '名称最长100字符', trigger: 'blur' }
        ],
        content: [
          { required: false, max: 500, message: '说明不超过500字', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    popData: {
      handler(data) {
        this.isAdd = !data.id
        this.formData = Object.assign({}, data)
        this.formData.val = this.formData.minValue != null || this.formData.maxValue != null
      },
      deep: true,
      immediate: true
    },
    confirm() {
      const params = {
        ...(this.formData || {})
      }
      delete params.createBy
      delete params.createTm
      delete params.modifyBy
      delete params.modifyTm
      if (!params.val) {
        delete params.minValue
        delete params.maxValue
      }
      this.submit(params)
    }
  },
  methods: {
    valChangeHandler() {
      this.$forceUpdate()
    },
    /**
     * change事件
     */
    handlerSelectData(config) {
      const Ref = this.$refs[config.prop]
      if (Ref && config.isClosePop) {
        Ref.dropDownVisible = false
      }
    },
    /**
     * 提交
     */
    submit(params) {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          const res = await this.$api.optimizationSuggestion[this.isAdd ? 'add' : 'update'](params)
          if (Number(res.code) === 1000) {
            this.$message.success(`${this.isAdd ? '新增' : '编辑'}成功！`)
            this.$emit('onFinish', 'optimizationSuggestion-add')
          }
        }
      })
    }
  }
}
</script>
